<template>
  <section class="c-page-frame-round">
    <div
      v-for="index in 7"
      :key="index"
    >
      <div />
      <div />
    </div>
  </section>
</template>

<style lang="less" scoped>
@import '~@/styles/variables.less';

.c-page-frame-round {
  width: 0;
  height: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: round-run-start 60s linear infinite;
  > div {
    width: 0;
    height: 555px;
    transform-origin: top center;
    position: absolute;
    top: 0;
    > div {
      position: absolute;
      bottom: 0;
      border: 90px solid transparent;
      border-bottom-width: 200px;
      border-bottom-color: lighten(@navButton, 10%);
      transform: rotateZ(-20deg);
      opacity: 0.7;
      &:nth-child(2) {
        top: -100px;
        left: -30px;
        border-bottom-color: lighten(@navButtonActive, 20%);
      }
    }
  }
  .loop-div(@i, @n) when (@i <= @n) {
    & > div:nth-child(@{i}) {
      transform: rotateZ((360/7deg) * @i);
    }
    .loop-div(@i+1, @n);
  }
  .loop-div(1, 7);
}

@keyframes round-run-start {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>
